<template>
  <a-form
    :model="form"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >
    <a-form-item
      :label="$t('401')"
      :rules="[{ required: true, message: $t('402') }]"
    >
      <a-input v-model:value="form.name" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" @click="doSaveName">{{ $t("224") }}</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup>
import CommonDefine from "@/component/CommonDefine";
import { reactive } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const form = reactive({});

const doSaveName = () => {
  if (form.name == undefined || form.name.trim().length < 2) {
    CommonDefine.alert(t("403"));
    return;
  }
  CommonDefine.apiPostArm("/api/v1/user/change-name", form, (d) => {
    CommonDefine.alert(t("404"));
    localStorage.setItem("uname", form.name);
  });
};
</script>
